<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name ="apple-mobile-web-app-capable" content= "yes" />
    <meta name ="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0,user-scalable=no" />
    <style>
        html,body{
            font-size: 62.5%;
            height: 100%;
            background-color: red;
        }
        body{
            background-image:url(moonBG.png);
        }
        #turntable{
            position: relative;
            width: 605px;
            top:200px;
            margin: 0 auto;
        }
        canvas{
            transition:all 8s ease;
        }
        #btn{
            position: absolute;
            left: 225px;
            top: 170px;
            width: 150px;
        }
        .note{
            position: relative;
            top:250px;
        }
        .note p{
            text-align: center;
            font-size: 2.8rem;
            letter-spacing: 3px;
            color: yellow;
        }
    </style>
</head>
<body>
<div id="turntable">
    <canvas id="canvas" width="600" height="600">抱歉！浏览器不支持。</canvas>
    <img  src="point.png" id="btn"/>
</div>

<div class="note">
    <p>活动说明</p>
</div>

<script src="viewport.js"></script>
<script>
    window.addEventListener('load', function() {
        var num = 8;
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var ctxImg = canvas.getContext('2d');
        for (var i = 0; i < num; i++) {
            ctx.save();
            ctx.beginPath();
            // 位移到圆心，下面需要围绕圆心旋转
            ctx.translate(300, 300);
            ctx.moveTo(0, 0);
            // degrees * Math.PI/180
            ctx.rotate((360 / num * i + 360 / num / 2) * Math.PI / 180);
            // 绘制圆弧
            ctx.arc(0, 0, 300, 0, 2 * Math.PI / num, false);
            if (i % 2 == 0) ctx.fillStyle = '#fff4d6';
            else  ctx.fillStyle = '#f8f8f8';
            // 填充扇形
            ctx.fill();
            // 绘制边框
            ctx.lineWidth = 2;
            ctx.strokeStyle = '#f48d24';
            ctx.stroke();
            // 文字
            ctx.fillStyle = 'red';
            ctx.font = "2.4rem 微软雅黑";
            ctx.fontWeight = 'bold';
            ctx.translate(220, 50);
            ctx.rotate(115 * Math.PI / 180);

            switch (i) {
                case 0:
                    ctx.fillText('红包8元', 0, 0);
                    break;
                case 1:
                    ctx.translate(-35, 0);
                    ctx.fillText('188月饼礼盒', 0, 0);
                    break;
                case 2:
                    ctx.fillText('太空杯', 0, 0);
                    break;
                case 3:
                    ctx.fillText('红包1元', 0, 0);
                    break;
                case 4:
                    ctx.fillText('苹果6s', 0, 0);
                    break;
                case 5:
                    ctx.fillText('红包5元', 0, 0);
                    break;
                case 6:
                    ctx.translate(-35, 0);
                    ctx.fillText('288月饼礼盒', 0, 0);
                    break;
                case 7:
                    ctx.fillText('红包1元', 0, 0);
                    break;
            }
            // 恢复前一个状态
            ctx.restore();
        }


        ctxImg.beginPath();
        ctxImg.translate(270, 270);
        ctxImg.save();


        var moon = new Image();
        moon.src = 'moon.png';

        var iphone = new Image();
        iphone.src = 'iphone6s.png';

        var money = new Image();
        money.src = 'money.png';

        money.onload = function () {
            ctxImg.rotate(140 * Math.PI / 180);
            ctxImg.drawImage(money, -45, -250, 50, 60);

            ctxImg.restore();
            ctxImg.rotate(-90 * Math.PI / 180);
            ctxImg.drawImage(money, -50, -170, 50, 60);

            ctxImg.rotate(90 * Math.PI / 180);
            ctxImg.drawImage(money, 5, -170, 50, 60);

            ctxImg.rotate(90 * Math.PI / 180);
            ctxImg.drawImage(money, 10, -230, 50, 60);

            ctxImg.rotate(-90 * Math.PI / 180);
            ctxImg.drawImage(moon, 120, -125, 50, 50);

            ctxImg.drawImage(moon, 10, 170, 50, 50);

            ctxImg.rotate(-45 * Math.PI / 180);
            ctxImg.drawImage(iphone, -30, -160, 50, 50);
        };
    });

    // 抽奖
    var btn = document.getElementById('btn');
    btn.addEventListener('click',function () {
        prize(45);
    }, false);

    //转盘控制
    var aleadyDeg   =   3240;//初始转动
    var count   =   1;
    function prize(deg){
        if(count==1) {
            canvas.style.transform = 'rotate(' + (aleadyDeg+deg) + 'deg)';
        }
        else{
            canvas.style.transform = 'rotate(' + (aleadyDeg*count+deg) + 'deg)';
        }
        count+=1;
    }
</script>
</body>
</html>